<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<style type="text/css">
		
		*{
			cursor:pointer;
		}
		
		
		
			.main {
				display: flex;
				overflow-y: hidden;
			}

			#inner {
				display: none;
			}

			.left {
				position: absolute;
				left: 0;
				top: 0;
				height: 100vh;
				width: 274px;
				background: #FFFFFF;
				box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
				display: flex;

				justify-content: center;
			}

			.logo {
				position: absolute;
				top: 0px;
				width: 90%;
				height: 200px;
				

			}

			.right {
				position: absolute;
				right: 0;
				height: 100vh;
				top: 0;
				width: calc(100vw - 274px);
				overflow-y: auto;
				
			}
			.right::-webkit-scrollbar {
			            width: 4px;    
			            /*height: 4px;*/
			        }
			        .right::-webkit-scrollbar-thumb {
			            border-radius: 10px;
			            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			            background: rgba(0,0,0,0.2);
			        }
			        .right::-webkit-scrollbar-track {
			            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			            border-radius: 0;
			            background: rgba(0,0,0,0.1);
			
			        }

			.left_bar {
				position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 0;
				top: 190px;
				width: 85%;
				

			}

			.item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #8f9194;
				
				font-weight: 500;
				font-size: 20px;
				line-height: 19px;
			}
			

			.item:hover {
				background-color: #f0f0f0;
				border: #FFA014 solid 2px;
				color: gold;
			}
			

			.left_bar div {

				width: 95%;
				text-align: left;
				height: 55.09px;
				background-blend-mode: darken;
				mix-blend-mode: normal;
				border-radius: 10px;

			}

			.left .icon {
				margin-left: 10px;
				margin-right: 10px;
				width: 20px;
				height: 20px;
			}
			#inner{
				display: none;
			}
			
			
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">
				<img class="logo" src="../../static/img/My_logo3.png">
				<ul class="left_bar ">
					
					<div id="item0" class="item">
						<img class="icon" src="../../static/img/left_bar_icon/home.png">
						首页
					</div>
					<div id="item1" class="item">
							<img class="icon" src="../../static/img/left_bar_icon/menu.png">
							菜品管理
					</div>
					<ul id="inner1" style="display: none;">
						<div id="item1-1" class="item">
							<img class="icon" src="../../static/img/menu/icon/fenlei.png">
							菜品分类
						</div>
						<div id="item1-2" class="item">
							<img class="icon" src="../../static/img/menu/icon/add.png">
							增加新菜
						</div>
						<div id="item1-3" class="item">
							<img class="icon" src="../../static/img/menu/icon/fenxi.png">
							数据分析
						</div>
					</ul>
					<div id="item2" class="item">
						<img class="icon" src="../../static/img/left_bar_icon/customer.png">
						顾客信息
					</div>
					<div id="item3" class="item">
						<img class="icon" src="../../static/img/left_bar_icon/employee.png">
						员工管理
					</div>
					
					<div id="item4" class="item">
						<img class="icon" src="../../static/img/left_bar_icon/order.png"> 订单记录
					</div>
					<div id="item5" class="item">
						<img class="icon" src="../../static/img/left_bar_icon/charts.png"> 营业分析
					</div>

				</ul>
			</div>
			<div class="right">
				<nav class="navbar navbar-default navbar-fixed-right" style="border-radius: 0; margin: 0;border:0; border-bottom: #c7c7c7 solid 0.5px;">
					<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
					<div class="container-fluid">
						<div class="navbar-header" style="height: 50px;  display: flex;justify-content: flex-start;align-items: center;">
							<div class="showTime" style="font-size: 20px;"></div>
							<!-- <form class="navbar-form navbar-right" style="margin-left: 27px;">
							  <input type="text" class="form-control" placeholder="搜索...">
							</form> -->
						</div>

						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
							<ul class="nav navbar-nav" style="float: right;">
								{%with username=username%}
								<li class="active"><a href="#">{{username}}</a></li>
								{%endwith%}
								<li><a href="/exit">退出登录</a></li>
								
							</ul>
						</div><!-- /.navbar-collapse -->
					</div>
				</nav>

				<iframe src="/home" id="frameId" width="100%" style="height:calc(100vh - 55px); overflow-y: hidden;"
					frameborder="0" scrolling="auto" ></iframe>
			</div>
		</div>





		<script type="text/javascript" src="../../static/js/jquery-3.6.0.min.js">

		</script>
		<script type="text/javascript" src="../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js">
			
		</script>
		<script>
			var t = null;
			t = setTimeout(time, 1000); //開始运行
			function time() {
				clearTimeout(t); //清除定时器
				dt = new Date();
				//console.log(dt)
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours(); //获取时
				var m = dt.getMinutes(); //获取分
				var s = dt.getSeconds(); //获取秒
				document.querySelector(".showTime").innerHTML =

					y +
					"年" +
					mt +
					"月" +
					day +
					"日" +
					"-" +
					h +
					"时" +
					m +
					"分" +
					s +
					"秒";
				t = setTimeout(time, 1000); //设定定时器，循环运行
			}
		</script>
		<script type="text/javascript">
			$(function() {
				
				$('#item0').click(function() {
					
					$('#frameId').attr('src', '/home')
				})

				$('#item1').click(function() {
					$('#inner1').slideToggle()
				})
				$('#item1-1').click(function(){
					$('#frameId').attr('src', '/menu_select')
				})
				$('#item1-2').click(function(){
					$('#frameId').attr('src', '/menu_add')
				})
				$('#item1-3').click(function(){
					$('#frameId').attr('src', '/dish')
				})
				$('#item2').click(function() {
					$('#frameId').attr('src', '/customer_select')
				})
				$('#item3').click(function() {
					$('#frameId').attr('src', '/employee_select')
				})
				$('#item4').click(function() {
					$('#frameId').attr('src', '/order_select')
				})
				$('#item5').click(function(){
					$('#frameId').attr('src', '/business')
					
				})


			})
		</script>
	</body>
</html>
